<template>
  <div :class="store.mobile ? 'mobile-view' : 'page-view'" :style="bgStyle">
    <div v-if="store.mobile" class="mobile-header-view">
      <MHeader />
    </div>
    <div v-else class="page-header-view">
      <Header />
    </div>
    <n-dialog-provider>
      <n-scrollbar :class="store.mobile ? 'phone' : 'pc'">
        <div class="page-content-view">
          <router-view />
        </div>
      </n-scrollbar>
      <Setting />
    </n-dialog-provider>
    <div v-if="showPhone" class="rote-view">
      <img src="./assets/image/phone.png" alt="" />
      <div class="text">请旋转手机横屏预览</div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { createDeviceDetector } from "next-vue-device-detector";
import { computed, onMounted, ref, watch } from "vue";
import { NDialogProvider } from "naive-ui";
import { useRouter, useRoute } from "vue-router";
import { tmpStore } from "@/store/modules/template";
import Header from "@/components/Header/index.vue";
import MHeader from "@/components/Header/mIndex.vue";
import Setting from "@/components/Setting/index.vue";
import { useAppStore } from "@/store/modules/user";
const userStore = useAppStore();
const store = tmpStore();
const route = useRoute();
const device = createDeviceDetector();
const isMobile = computed(() => device.mobile);
store.setMobile(isMobile.value);
const background = computed(() => store.systemData);
const path: any = ["MAP", "A2", "A3", "B1", "B2"];
const bgStyle = computed(() => {
  if (background.value.backgroundPicture && !device.mobile) {
    return {
      background: `url(${background.value.backgroundPicture})no-repeat`,
      backgroundSize: "cover",
    };
  } else {
    return { background: background.value.backgroundColor };
  }
});
const winW = ref(1000);
const winH = ref(500);
const showPhone = computed(() => {
  let show = false;
  if (
    isMobile.value &&
    winW.value < winH.value &&
    path.includes(route.meta.title)
  ) {
    show = true;
  }
  return show;
});
watch(
  () => showPhone.value,
  (val) => {
    userStore.isLoadPage(!val);
  }
);
const updateHeight = () => {
  winW.value = window.innerWidth;
  winH.value = window.innerHeight;
};
onMounted(() => {
  // 获取页面宽度
  winW.value = window.innerWidth;
  winH.value = window.innerHeight;
  // 计算百分比
  window.addEventListener("resize", updateHeight);

  // Cleanup listener on component unmount
  return () => {
    window.removeEventListener("resize", updateHeight);
  };
});
</script>
<style lang="less">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  height: 100vh;
  width: 100vw;
}
.mobile-view {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}
.page-view {
  min-height: 100vh;
  height: 100%;
  background-size: cover;
  .mobile-header-view {
    height: 2.4rem;
  }
  .page-header-view {
    height: 88px;
  }
  // .page-content-view::-webkit-scrollbar {
  //   display: none; /* Chrome Safari */
  // }
  .page-content-view {
    // scrollbar-width: none; /* Firefox */
    height: calc(100vh - 88px);
    // overflow-y: auto;
  }
}
.phone {
  max-height: calc(100vh - 2.4rem);
}
.pc {
  max-height: calc(100vh - 88px);
}
.rote-view {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;
  background: #1c262d;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  img {
    width: 50%;
    object-fit: contain;
  }
  .text {
    font-size: 1.2rem;
    margin-top: 1.5rem;
    color: #ffffff;
  }
}
</style>
